/*
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-10-08 17:06:07
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-10-08 23:20:30
 * @FilePath: \react_staging\src\components\List\index.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { Component } from 'react'
import './index.css'
export default class index extends Component {
	render() {
		const { userList,isFirst,isLoading,err } = this.props
		console.log('用户信息', userList,isFirst,isLoading,err)
		return (
			<div className="row">
				{ isFirst?<h2>欢迎使用,输入关键字,随后点击搜索</h2>:isLoading? <h2>Loading加载中</h2>:err?<h2 style={{color:"red"}}>{err}</h2>:
                userList.map((userInfo) => {
					return (
						<div className="card" key={userInfo.id}>
							<a
								rel="noreferrer"
								href={userInfo.html_url}
								target="_blank"
							>
								<img
									src={userInfo.avatar_url}
									style={{ width: '100px' }}
									alt="avatar"
								/>
							</a>
							<p className="card-text">{userInfo.login}</p>
						</div>
					)
				})}
				{/* <div className="card">
					 <a
						rel="noreferrer"
						href="https://github.com/reactjs"
						target="_blank"
					>
						<img
							src="https://avatars.githubusercontent.com/u/6412038?v=3"
							style={{ width: '100px' }}
							alt="avatar"
						/>
					</a>
					<p className="card-text">reactjs</p>
				</div> */}
				{/* <div className="card">
					<a
						rel="noreferrer"
						href="https://github.com/reactjs"
						target="_blank"
					>
						<img
							src="https://avatars.githubusercontent.com/u/6412038?v=3"
							style={{ width: '100px' }}
							alt="avatar"
						/>
					</a>
					<p className="card-text">reactjs</p>
				</div>
				<div className="card">
					<a
						rel="noreferrer"
						href="https://github.com/reactjs"
						target="_blank"
					>
						<img
							src="https://avatars.githubusercontent.com/u/6412038?v=3"
							style={{ width: '100px' }}
							alt="avatar"
						/>
					</a>
					<p className="card-text">reactjs</p>
				</div>
				<div className="card">
					<a
						rel="noreferrer"
						href="https://github.com/reactjs"
						target="_blank"
					>
						<img
							src="https://avatars.githubusercontent.com/u/6412038?v=3"
							style={{ width: '100px' }}
							alt="avatar"
						/>
					</a>
					<p className="card-text">reactjs</p>
				</div>
				<div className="card">
					<a
						rel="noreferrer"
						href="https://github.com/reactjs"
						target="_blank"
					>
						<img
							src="https://avatars.githubusercontent.com/u/6412038?v=3"
							style={{ width: '100px' }}
							alt="avatar"
						/>
					</a>
					<p className="card-text">reactjs</p>
				</div> */}
			</div>
		)
	}
}
